import { Map, Marker } from 'react-amap';
import { Button } from 'antd';
const styleA = {
    position: 'absolute',
    top: '10px',
    left: '10px',
    padding: '5px 10px',
    border: '1px solid #d3d3d3',
    backgroundColor: '#f9f9f9'
}
class AmapLocation extends React.Component {
    constructor() {
        super();
        this.state = {
            center: null,
            position: {
                longitude: 130,
                latitude: 30
            },
            draging: false,
            markerStyle: {
                position: 'absolute',
                right: '50%',
                bottom: '50%',
                color: '#fff',
                backgroundColor: '#000',
                width: '30px',
                height: '30px',
                borderRadius: '50%'
            }
        };
        this.mapEvents = {
            created: (map) => {
                this.mapInstance = map;
                this.showCenter();
            },
            moveend: () => {
                this.showCenter();
                const center = this.mapInstance.getCenter();
                this.setState({
                    position: {
                        longitude: center.lng,
                        latitude: center.lat,
                    }
                })

            },
            dragstart: () => {
                this.setState({
                    draging: true, markerStyle: {
                        width: '12px',
                        height: '12px',
                        position: 'absolute',
                        right: '50%',
                        bottom: '50%',
                        color: '#fff',
                        backgroundColor: '#000',
                        borderRadius: '50%'
                    }
                });
            },
            dragend: () => {
                this.setState({
                    draging: true, markerStyle: {
                        width: '16px',
                        height: '16px',
                        position: 'absolute',
                        right: '50%',
                        bottom: '50%',
                        color: '#fff',
                        backgroundColor: '#000',
                        borderRadius: '50%'
                    }
                });
            }
        };
    }
    showCenter() {
        this.setState({
            center: `${this.mapInstance.getCenter()}`
        });
    }
    render() {
        return <div style={{ width: '100%', height: '400px' }}>
            <Map events={this.mapEvents} center={this.position}>
                <div className="customLayer" style={styleA}>
                    <h4>中心点位置：</h4>
                    <p>{this.state.center}</p>
                </div>
                <div className="customLayer" style={this.state.markerStyle}>
                </div>
            </Map>
        </div>
    }
}

export default AmapLocation;